<template>
  <div class="list">
      <div class="title">类别列表</div>
      <div class="content">
        <ul class="CategoryList">
            <li v-for="item of categoryList" :key="item.ID" @click="showSubList(item.ID)" :class="active = item.ID==isId?'CategoryListActive':''">
                {{item.MALL_CATEGORY_NAME}}
            </li>
        </ul>
        <div class="CategorySubList">
          <ul class="category">
              <li v-for="(item,index) of categorySubList" :key="item.ID" @click="showGoodsList(item.ID,index)" :class="active = item.ID==isId1?'CategorySubListActive':''">
                  <span>{{item.MALL_SUB_NAME}}</span>
              </li>
          </ul>
          <!-- <van-loading size="24px">加载中...</van-loading> -->
          <ul class="goods">
              <li v-for="item of goodsList" :key="item.ID">
                <!-- <router-link :to="{name:'detail',params:{id:item.ID}}"> -->
                  <img v-lazy="item.IMAGE1" alt="#" @click="showGoods(item.ID)">
                  <div>
                    <p class="name">{{item.NAME}}</p>
                    <p>￥ {{item.PRESENT_PRICE}}.00</p>
                  </div>
                <!-- </router-link> -->
              </li>
          </ul>
        </div>
      </div>
  </div>
</template>

<script>

// import * as indexRequest from "@/commonAPI/api.js"
import { GetData } from "@/commonAPI/api.js"
import { getDetailData } from "@/commonAPI/api.js"

export default {
  props:["id"],
  data() {
    return {
      categoryList:[],
      categorySubList:[],
      goodsList:[],
      bgc:"",
      isId:this.id?this.id:1,
      isId1:0
    }
  },
  methods:{
    async getMsg(){
        var that = this
        let msg = await that.list()
        let msg1 = await that.subList(!this.id?msg[0].ID:this.id)    
        await that.categorySubID(msg1[0].ID)    
    },
    async list(){
      var that = this
      // let info = await indexRequest.GetData(url)
      let res = await GetData("/goods/getCategoryList")
      that.categoryList = res.data.message
      return res.data.message
    },
    async subList(id){
      var that = this
      // let info = await indexRequest.GetData(url)
      let config = {
        categoryId:id
      }
      let res = await getDetailData("/goods/getCategorySubList",config)
      that.categorySubList = res
      return res
    },
    async categorySubID(id){
      var that = this
      // let info = await indexRequest.GetData(url)
      let config = {
        categorySubId:id
      }
      let res = await getDetailData("/goods/getGoodsListByCategorySubID",config)
      // window.console.log(res)
      that.goodsList = res
    },

    showSubList(Id){
      var that = this
        that.isId = Id
        // console.log(that.id)
        that.subList(Id).then(function(res){
              that.categorySubID(res[0].ID)
        })

    },
    showGoodsList(id,Id){
      var that = this
      that.bgc="active"
        this.isId1 = Id
        that.categorySubID(id)
    },

    showGoods(id){
        // console.log(this)
        this.$parent.getDetail(id)
    }
  },
  created(){
    var that = this
    that.getMsg()
  },
  components:{
    
  }
};
</script>

<style lang="scss" scoped>
@mixin list {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  font-weight: 550;
  border-bottom: 1px solid #eeeeee;
}
      .list{
        .CategoryListActive{
          background-color: white;
        }
        .CategorySubListActive{
          border-bottom: 2px solid #ff5959 !important;
          color: #ff5959;
        }
        .title{
          background-color: white;
          @include list
        }
        .content{
          display: flex;
          .CategoryList{
            li{
              width: 100px;
              @include list
            }
          }
          .CategorySubList{
            display: flex;
            width: 273px;
            flex-direction: column;
            .category{
              display: flex;
                  background-color:white;
                  overflow-x: auto;
                li{
                  flex: 1;
                  white-space: nowrap;  
                  @include list; 
                  font-size: 16px;  
                  font-weight: normal;
                  margin: 0 10px;
                }
            }
            .goods{
              background-color: white;
              overflow-y:auto;
              height: 500px;
              li{
                font-size: 14px;
                border-bottom: 1px solid #eeeeee;
                display: flex;
                // a{
                //   display: flex;
                  img{
                    width: 100px;
                    height: 100px;
                    vertical-align: middle;
                    padding: 20px 10px;
                  }
                  .name{
                      display: inline-block;
                      width: 170px;
                    }
                // }
              }
            } 
          }
        }
      }
</style>